<template>
  <div id="top-ten">
    <div id="top-ten-title">
      <div class="top-ten-title">
        <img src="static/img/yellow-con.png" class="top-ten-img1">
        <img src="static/img/yellow-con.png" class="top-ten-img2">
        <img src="static/img/yellow-con.png" class="top-ten-img3">
        <img src="static/img/yellow-con.png" class="top-ten-img4">
        <img src="static/img/yellow-con.png" class="top-ten-img5">
        <img src="static/img/yellow-con.png" class="top-ten-img6">
        <img src="static/img/yellow-con.png" class="top-ten-img7">
        <img src="static/img/yellow-con.png" class="top-ten-img8">
        <img src="static/img/blue-con.png" class="top-ten-img9">
        <img src="static/img/blue-con.png" class="top-ten-img10">
        <img src="static/img/blue-con.png" class="top-ten-img11">
        <img src="static/img/blue-con.png" class="top-ten-img12">
        <span>各省车辆排名top10</span>
      </div>
    </div>
    <div class="top-ten-button">
      <div class="list1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
      </div>
      <div class="list2">
        <div>{{province1}}</div>
        <div>{{province2}}</div>
        <div>{{province3}}</div>
        <div>{{province4}}</div>
        <div>{{province5}}</div>
      </div>
      <div class="list3">
        <div>{{topone}}</div>
        <div>{{toptwo}}</div>
        <div>{{topthree}}</div>
        <div>{{topfour}}</div>
        <div>{{topfive}}</div>
      </div>

      <div class="list7">
        <div class="maxlong"></div>
        <div class="secondlong"></div>
        <div class="thirdlong"></div>
        <div class="fourthlong"></div>
        <div class="fivthlong"></div>
      </div>
      <div class="list8">
        <div class="sixthlong"></div>
        <div class="seventhlong"></div>
        <div class="eighthlong"></div>
        <div class="ninethlong"></div>
        <div class="tenthlong"></div>
      </div>


      <div class="list4">
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
      </div>
      <div class="list5">
        <div>{{province6}}</div>
        <div>{{province7}}</div>
        <div>{{province8}}</div>
        <div>{{province9}}</div>
        <div>{{province10}}</div>
      </div>
      <div class="list6">
        <div>{{topsix}}</div>
        <div>{{topseven}}</div>
        <div>{{topeight}}</div>
        <div>{{topnine}}</div>
        <div>{{topten}}</div>
      </div>
      <div id="top-ten-chart"></div>
      <div id="top-ten-chart1"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'top-ten',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        topone: 1,
        toptwo: 2,
        topthree: 3,
        topfour: 4,
        topfive: 5,
        topsix: 6,
        topseven: 7,
        topeight: 8,
        topnine: 9,
        topten: 10,
        timeList : 1513645200000,
        province1 : "山东",
        province2 : "山东",
        province3 : "山东",
        province4 : "山东",
        province5 : "山东",
        province6 : "山东",
        province7 : "山东",
        province8 : "山东",
        province9 : "山东",
        province10 : "山东",
      }
    },
    mounted() {
      this.getCount();
      this.changeTimeList();
    },
    methods: {
      getCount:  function () {
        const ten_count = [];
        const ten_name =[];
        $.ajax({
          type : 'get',
          async :true,
          url: 'http://203.81.245.37:2420/platformservice/right/' +this.timeList ,
          data : {},
          dataType: 'json',
          success : (result) => {
            if (result) {
              let ten_carprovince = result.carprovince;
//              console.log(ten_carprovince);
              for (var i=0;i<ten_carprovince.length;i++) {
                ten_count.push(ten_carprovince[i].count)
              }
              for (var i=0;i<ten_carprovince.length;i++) {
                var pn = ten_carprovince[i].province_name;
                if(pn.length == 4) {
                  pn = pn.substring(0,3);
                }else{
                  pn = pn.substring(0,2);
                }
                ten_name.push(pn)
              }
//              console.log(ten_carprovince[i].province_name);
              this.topone = ten_count[0];
              this.toptwo = ten_count[1];
              this.topthree = ten_count[2];
              this.topfour = ten_count[3];
              this.topfive = ten_count[4];
              this.topsix = ten_count[5];
              this.topseven = ten_count[6];
              this.topeight = ten_count[7];
              this.topnine = ten_count[8];
              this.topten = ten_count[9];
//              console.log(this.toptwo/this.topone*86);
              const _newsecondlong = this.toptwo/this.topone*86;
              const _newthreelong = this.topthree/this.topone*86;
              const _newfourlong = this.topfour/this.topone*86;
              const _newfivelong = this.topfive/this.topone*86;
              const _newsixlong = this.topsix/this.topone*86;
              const _newsevenlong = this.topseven/this.topone*86;
              const _neweightlong = this.topeight/this.topone*86;
              const _newninelong = this.topnine/this.topone*86;
              const _newtenlong = this.topten/this.topone*86;
              $('.secondlong').css("width",_newsecondlong+"px");
              $('.thirdlong').css("width",_newthreelong+"px");
              $('.fourthlong').css("width",_newfourlong+"px");
              $('.fivthlong').css("width",_newfivelong+"px");
              $('.sixthlong').css("width",_newsixlong+"px");
              $('.seventhlong').css("width",_newsevenlong+"px");
              $('.eighthlong').css("width",_neweightlong+"px");
              $('.ninethlong').css("width",_newninelong+"px");
              $('.tenthlong').css("width",_newtenlong+"px");
              // console.log(ten_name);
              this.province1 = ten_name[0];
              this.province2 = ten_name[1];
              this.province3 = ten_name[2];
              this.province4 = ten_name[3];
              this.province5 = ten_name[4];
              this.province6 = ten_name[5];
              this.province7 = ten_name[6];
              this.province8 = ten_name[7];
              this.province9 = ten_name[8];
              this.province10 = ten_name[9];
//              for (var k=0;k<ten_name.length;k++) {
//                this.province1
//              }
            }
          }
        })
      },
      changeTimeList: function () {
        var timeList = [1514422800000,1514336400000,1514250000000,1514163600000,1514077200000,1513990800000,1513904400000,1513818000000,1513731600000,1513645200000];
        var j = 0;
        setInterval( () => {
          this.timeList = timeList[j];
//          console.log(timeList[j]);
          if (j < timeList.length-1){
            j+=1;
          }else {
            j = 0;
          }
          this.getCount();
        },60000)
      }
    }
  }
</script>

<style>
  #top-ten {
    height: 200px;
    width: 440px;
    position: relative;
  }
  #top-ten-title {
    height: 40px;
    width: 438px;
    background: rgba(7, 34, 31, 0.8);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(32, 221, 201, 0.8);
    border-image: initial;
  }
  .top-ten-title {
    height: 30px;
    width: 428px;
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: MicrosoftYaHeiUI;
    text-align: left;
    text-indent: 4px;
    font-size: 18px;
    line-height: 30px;
    color: rgb(239, 187, 66);
    letter-spacing: -0.45px;
    background: rgba(0, 158, 158, 0.2);
  }
  .list1 {
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 14px;
    color: #EFBB42;
    letter-spacing: -0.35px;
    line-height: 30px;
    position: absolute;
    left: 11px;
    top: 47px;
    height: 150px;
    width: 9px;
  }
  .list2 {
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 14px;
    color: #EFBB42;
    letter-spacing: -0.35px;
    line-height: 30px;
    position: absolute;
    left: 27px;
    top: 47px;
    height: 150px;
    width: 28px;
  }
  .list3 {
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: -0.35px;
    line-height: 30px;
    position: absolute;
    left: 160px;
    top: 47px;
    height: 150px;
    width: 51px;
  }


  .list4 {
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 14px;
    color: #EFBB42;
    letter-spacing: -0.35px;
    line-height: 30px;
    position: absolute;
    left: 226px;
    top: 47px;
    height: 150px;
    width: 9px;
  }
  .list5 {
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 14px;
    color: #EFBB42;
    letter-spacing: -0.35px;
    line-height: 30px;
    position: absolute;
    left: 242px;
    top: 47px;
    height: 150px;
    width: 28px;
  }
  .list6 {
    font-family: MicrosoftYaHeiUI-Bold;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: -0.35px;
    line-height: 30px;
    position: absolute;
    left: 375px;
    top: 47px;
    height: 150px;
    width: 51px;
  }
  .maxlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 60px;
    left: 66px;
    border-radius: 10px;
  }
  .secondlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 90px;
    left: 66px;
    border-radius: 10px;
  }
  .thirdlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 120px;
    left: 66px;
    border-radius: 10px;
  }
  .fourthlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 150px;
    left: 66px;
    border-radius: 10px;
  }
  .fivthlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 180px;
    left: 66px;
    border-radius: 10px;
  }
  .sixthlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 60px;
    left: 280px;
    border-radius: 10px;
  }
  .seventhlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 90px;
    left: 280px;
    border-radius: 10px;
  }
  .eighthlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 120px;
    left: 280px;
    border-radius: 10px;
  }
  .ninethlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 150px;
    left: 280px;
    border-radius: 10px;
  }
  .tenthlong {
    height: 5px;
    width: 86px;
    background: #7AE9E5;
    position: absolute;
    top: 180px;
    left: 280px;
    border-radius: 10px;
  }




  .top-ten-button {
    height: 157px;
    width: 438px;
    background: rgba(7,34,31,0.80);
    border: 1px solid rgba(32,221,201,0.80);
  }
  .top-ten-img1 {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 3;
  }
  .top-ten-img2 {
    position: absolute;
    top: -7px;
    left: 429px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .top-ten-img3 {
    position: absolute;
    top: 32px;
    left: 429px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .top-ten-img4 {
    position: absolute;
    top: 32px;
    left: -7px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .top-ten-img5 {
    position: absolute;
    top: 35px;
    left: -7px;
    z-index: 3;
  }
  .top-ten-img6 {
    position: absolute;
    top: 35px;
    left: 429px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .top-ten-img7 {
    position: absolute;
    top: 190px;
    left: 429px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .top-ten-img8 {
    position: absolute;
    top: 190px;
    left: -7px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .top-ten-img9 {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
  }
  .top-ten-img10 {
    position: absolute;
    top: -1px;
    left: 425px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .top-ten-img11 {
    position: absolute;
    top: 27px;
    left: 425px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .top-ten-img12 {
    position: absolute;
    top: 27px;
    left: -1px;
    transform: rotate(270deg);
    z-index: 3;
  }
</style>
